<template>
  <div class="app-container">
    <div class="search-container">
      <!-- 头部查询表单 -->
      <el-form ref="QueryFormRef" :inline="true" :model="params">
        <el-form-item>
          <el-button type="primary" @click="resetQuery">
            <el-icon>
              <refresh/>
            </el-icon>
            查询全部
          </el-button>
          <el-button type="success" @click="openDialog()">
            <el-icon>
              <plus/>
            </el-icon>
            商家注册
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <el-table v-loading="userTableLoading" :data="userDataList" border
                highlight-current-row stripe
                @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55"/>
        <el-table-column align="center" label="用户id" prop="id" width="175"/>
        <el-table-column align="center" label="用户名" min-width="150" prop="account"/>
        <el-table-column align="center" label="手机号" prop="phone" width="150"/>
        <el-table-column align="center" label="邮箱" min-width="150" prop="email"/>
        <el-table-column align="center" label="权限" prop="permissions" width="100">
          <template #default="scope">
            <el-tag :type="permissions[scope.row.permissions].type">{{ permissions[scope.row.permissions].name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="微信id" prop="wxId" width="200"/>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button link size="small" type="primary" @click="openDialog(scope.row.id)">
              <el-icon>
                <edit/>
              </el-icon>
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-if="total > 0"
          v-model:page="params.page"
          v-model:size="params.size"
          v-model:total="total"
          @pagination="handleQuery"
      />
    </el-card>

    <!-- 表单弹窗 -->
    <el-dialog
        v-model="dialog.visible" :title="dialog.title"
        width="65%" @close="closeDialog"
    >
      <el-form
          ref="UserFormRef" :model="userFormData" :rules="rules"
          label-position="left" label-width="120px" @keyup.enter.native="handleSubmit"
      >
        <el-form-item label="用户名" prop="account">
          <el-input v-model.trim="userFormData.account" placeholder="请输入用户名"/>
        </el-form-item>

        <el-form-item label="手机号" prop="phone">
          <el-input v-model.trim="userFormData.phone" placeholder="请输入手机号"/>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model.trim="userFormData.email" placeholder="请输入邮箱"/>
        </el-form-item>

        <el-form-item label="权限" prop="permissions">
          <el-select v-model="userFormData.permissions" placeholder="请选择权限">
            <el-option label="管理员" value="ADMIN"/>
            <el-option label="买家" value="BUYER"/>
            <el-option label="卖家" value="MERCHANT"/>
          </el-select>
        </el-form-item>

        <el-form-item label="微信id" prop="wxId">
          <el-input v-model.trim="userFormData.wxId" placeholder="请输入微信id"/>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onActivated, onMounted, reactive, ref} from "vue";
import {Edit, Plus, Refresh} from "@element-plus/icons-vue";
import Pagination from "@/components/pagination.vue";
/**
 * User ——> 实体大驼峰
 * user ——> 实体小驼峰
 * 用户 ——> 实体中文名
 */
import {getUserById, getUserPageList, merchantRegister, updateUser,} from "@/apis/user";

const permissions = {
  "ADMIN": {name: "管理员", type: "success"},
  "BUYER": {name: "买家", type: "primary"},
  "MERCHANT": {name: "卖家", type: "info"}
}
const QueryFormRef = ref();
const UserFormRef = ref();

const userTableLoading = ref(false);
const selectionIds = ref([]);

const total = ref(0);

const params = reactive({
  page: 1,
  size: 10,
  key: ""
});

const userDataList = ref([]);

const dialog = reactive({
  title: "",
  visible: false,
});
const userFormData = reactive({
  id: undefined,
  account: "",
  email: "",
  phone: "",
  permissions: "",
  password: "bgprintyyyy",
  wxId: ""
});
const rules = {
  id: [{required: true, message: "请输入id", trigger: "blur"}],
  account: [{required: true, message: "请输入账号", trigger: "blur"}],
  email: [{required: true, message: "请输入邮箱", trigger: "blur"}],
  phone: [{required: true, message: "请输入手机号", trigger: "blur"}],
  permissions: [{required: true, message: "请输入权限", trigger: "blur"}],
  // wxId: [{required: true, message: "请输入微信id", trigger: "blur"}],
}

/** 查询 */
const handleQuery = () => {
  userTableLoading.value = true;
  getUserPageList(params)
      .then(({data}) => {
        userDataList.value = data.list;
        total.value = data.totalCount;
      })
      .finally(() => {
        userTableLoading.value = false;
      });
}

/** 重置查询 */
const resetQuery = () => {
  QueryFormRef.value.resetFields();
  handleQuery();
}

/** 行checkbox 选中事件 */
const handleSelectionChange = selection => {
  selectionIds.value = selection.map((item) => item.id);
}

/** 打开用户表单弹窗 */
const openDialog = id => {
  dialog.visible = true;
  if (id) {
    dialog.title = "修改用户";
    getUserById(id).then(({data}) => {
      Object.assign(userFormData, data);
    });
  } else {
    dialog.title = "商家注册";
  }
}

/** 用户保存提交 */
const handleSubmit = () => {
  UserFormRef.value.validate((valid) => {
    if (valid) {
      userTableLoading.value = true;
      if (userFormData.id) {
        updateUser(userFormData)
            .then(() => {
              ElMessage.success("修改成功");
              closeDialog();
              resetQuery();
            })
            .finally(() => (userTableLoading.value = false));
      } else {
        merchantRegister(userFormData)
            .then(() => {
              ElMessage.success("商家注册成功");
              closeDialog();
              resetQuery();
            })
            .finally(() => (userTableLoading.value = false));
      }
    }
  });
}

/** 重置表单 */
const resetForm = () => {
  UserFormRef.value.resetFields();
  userFormData.id = undefined;
}

/** 关闭表单弹窗 */
const closeDialog = () => {
  dialog.visible = false;
  resetForm();
}

onMounted(() => {
  handleQuery();
});
onActivated(() => {
  handleQuery();
})
</script>
<style scoped>
:deep(.pagination) {
  display: flex;
  justify-content: center;
}
</style>

